<!DOCTYPE html>
<script src="../../resources/run-after-layout-and-paint.js"></script>
<style>
#track {
  d: path('M20,100 H180');
  stroke: blue;
}
</style>
<svg id="svgRoot" width="200" height="200">

  <path id="track" d="M20,20 H180"/>

  <circle r="10" cx="0" cy="0" fill="green">
    <animateMotion dur="5s" fill="freeze">
      <mpath xlink:href="#track"/>
    </animateMotion>
  </circle>
</svg>
<script>
'use strict';
runAfterLayoutAndPaint(function() {
  document.getElementById('track').setAttribute('d', 'M100,20 V180');
  document.getElementById('svgRoot').setCurrentTime(5);
}, true);
</script>
